<template>
    <div class="content" style="height: 100%; color: #fff">
        <div style="height: 60px; display: flex; align-items: center; justify-content: center">
            <el-select v-model="device_id" style="width: 280px" placeholder="请选择电解槽" @change="setTimer">
                <el-option v-for="i in options" :key="i.device_id" :label="i.device_name" :value="i.id"></el-option>
            </el-select>
            <el-button v-if="manager && manager.runing" style="margin-left: 20px" type="primary" @click="zimu()">隐藏告警字幕</el-button>
            <el-button v-else style="margin-left: 20px" type="primary" @click="zimu()">显示告警字幕</el-button>
            <el-button style="margin-left: 20px" @click="exportt" type="primary">导出</el-button>
            <el-button style="margin-left: 20px" @click="isShow = true" type="primary">阈值设置</el-button>
            <el-button style="margin-left: 20px" @click="isShow1 = true" type="primary">报表</el-button>
            <div v-if="date" style="margin-left: 80px; font-size: 24px" @dblclick="show = !show">更新时间：{{ date }}</div>
        </div>
        <div id="content" style="height: calc(100% - 60px); display: flex">
            <div class="columnn" style="width: 40px">
                <div style="height: 30%; flex: auto"><div>A侧</div></div>
                <div style="height: 30%; flex: auto"><div>B侧</div></div>
                <div style="height: 40%; flex: auto"><div>炉底</div></div>
                <div style="height: 30%; flex: auto"><div>槽洞</div></div>
            </div>
            <div class="columnn" style="width: 60px">
                <div><div>序号</div></div>
                <div @click="warn('gc')"><div>钢窗</div></div>
                <div @click="warn('gb')"><div>钢棒</div></div>
                <div><div>序号</div></div>
                <div @click="warn('gc')"><div>钢窗</div></div>
                <div @click="warn('gb')"><div>钢棒</div></div>
                <div><div>序号</div></div>
                <div @click="warn('ld')"><div>A侧</div></div>
                <div @click="warn('ld')"><div>中间</div></div>
                <div @click="warn('ld')"><div>B侧</div></div>
                <div><div>序号</div></div>
                <div><div>前(A-B)</div></div>
                <div><div>后(A-B)</div></div>
            </div>
            <div class="columnn" v-for="index in 27" :key="index" style="flex: 1; height: 100%">
                <div>
                    <div>{{ index }}</div>
                </div>
                <div @click="offset(5 * (index - 1) + 1)" :style="{ color: setcolor(data[5 * (index - 1) + 1], 'gc') }">
                    <div v-if="show">
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 1] ? offsetList[5 * (index - 1) + 1][0] : 0 }}</div>
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 1] ? offsetList[5 * (index - 1) + 1][1] : 0 }}</div>
                    </div>
                    <div v-else>{{ data[5 * (index - 1) + 1] }}</div>
                </div>
                <div>
                    <div
                        :style="{
                            border: '#fff solid 1px',
                            height: '100%',
                            flex: '1',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: setcolor(data[5 * (index - 1) + 2], 'gb'),
                        }"
                        @click="offset(5 * (index - 1) + 2)"
                    >
                        <div v-if="show">
                            <div>{{ offsetList && offsetList[5 * (index - 1) + 2] ? offsetList[5 * (index - 1) + 2][0] : 0 }}</div>
                            <div>{{ offsetList && offsetList[5 * (index - 1) + 2] ? offsetList[5 * (index - 1) + 2][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[5 * (index - 1) + 2] }}</div>
                    </div>
                    <div
                        :style="{
                            border: '#fff solid 1px',
                            height: '100%',
                            flex: '1',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: setcolor(data[5 * (index - 1) + 3], 'gb'),
                        }"
                        @click="offset(5 * (index - 1) + 3)"
                    >
                        <div v-if="show">
                            <div>{{ offsetList && offsetList[5 * (index - 1) + 3] ? offsetList[5 * (index - 1) + 3][0] : 0 }}</div>
                            <div>{{ offsetList && offsetList[5 * (index - 1) + 3] ? offsetList[5 * (index - 1) + 3][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[5 * (index - 1) + 3] }}</div>
                    </div>
                </div>
                <div>
                    <div>{{ index }}</div>
                </div>
                <div @click="offset(136 + (index - 1) * 4 + 1)" :style="{ color: setcolor(data[136 + (index - 1) * 4 + 1], 'gc') }">
                    <div v-if="show">
                        <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 1] ? offsetList[136 + (index - 1) * 4 + 1][0] : 0 }}</div>
                        <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 1] ? offsetList[136 + (index - 1) * 4 + 1][1] : 0 }}</div>
                    </div>
                    <div v-else>{{ data[136 + (index - 1) * 4 + 1] }}</div>
                </div>
                <div :style="{}">
                    <div
                        @click="offset(136 + (index - 1) * 4 + 3)"
                        :style="{
                            border: '#fff solid 1px',
                            height: '100%',
                            flex: '1',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: setcolor(data[136 + (index - 1) * 4 + 3], 'gb'),
                        }"
                    >
                        <div v-if="show">
                            <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 3] ? offsetList[136 + (index - 1) * 4 + 3][0] : 0 }}</div>
                            <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 3] ? offsetList[136 + (index - 1) * 4 + 3][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[136 + (index - 1) * 4 + 3] }}</div>
                    </div>
                    <div
                        @click="offset(136 + (index - 1) * 4 + 2)"
                        :style="{
                            border: '#fff solid 1px',
                            height: '100%',
                            flex: '1',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: setcolor(data[136 + (index - 1) * 4 + 2], 'gb'),
                        }"
                    >
                        <div v-if="show">
                            <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 2] ? offsetList[136 + (index - 1) * 4 + 2][0] : 0 }}</div>
                            <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 2] ? offsetList[136 + (index - 1) * 4 + 2][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[136 + (index - 1) * 4 + 2] }}</div>
                    </div>
                </div>
                <div>
                    <div>{{ index }}</div>
                </div>
                <div @click="offset(5 * (index - 1) + 4)" :style="{ color: setcolor(data[5 * (index - 1) + 4], 'ld') }">
                    <div v-if="show">
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 4] ? offsetList[5 * (index - 1) + 4][0] : 0 }}</div>
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 4] ? offsetList[5 * (index - 1) + 4][1] : 0 }}</div>
                    </div>
                    <div v-else>{{ data[5 * (index - 1) + 4] }}</div>
                </div>
                <div @click="offset(5 * (index - 1) + 5)" :style="{ color: setcolor(data[5 * (index - 1) + 5], 'ld') }">
                    <div v-if="show">
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 5] ? offsetList[5 * (index - 1) + 5][0] : 0 }}</div>
                        <div>{{ offsetList && offsetList[5 * (index - 1) + 5] ? offsetList[5 * (index - 1) + 5][1] : 0 }}</div>
                    </div>
                    <div v-else>{{ data[5 * (index - 1) + 5] }}</div>
                </div>
                <div @click="offset(136 + (index - 1) * 4 + 4)" :style="{ color: setcolor(data[136 + (index - 1) * 4 + 4], 'ld') }">
                    <div v-if="show">
                        <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 4] ? offsetList[136 + (index - 1) * 4 + 4][0] : 0 }}</div>
                        <div>{{ offsetList && offsetList[136 + (index - 1) * 4 + 4] ? offsetList[136 + (index - 1) * 4 + 4][1] : 0 }}</div>
                    </div>
                    <div v-else>{{ data[136 + (index - 1) * 4 + 4] }}</div>
                </div>
                <div :style="{ border: index < 12 ? '#fff solid 1px' : 'transparent solid 1px' }">
                    <div v-if="index < 12">{{ index }}</div>
                </div>
                <div @click="offset(cd1[index - 1])" :style="{ border: index < 12 ? '#fff solid 1px' : 'transparent solid 1px', color: '#6FCFF2' }">
                    <div>
                        <div v-if="show">
                            <div>{{ !cd1[index - 1] ? '' : offsetList && offsetList[cd1[index - 1]] ? offsetList[cd1[index - 1]][0] : 0 }}</div>
                            <div>{{ !cd1[index - 1] ? '' : offsetList && offsetList[cd1[index - 1]] ? offsetList[cd1[index - 1]][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[cd1[index - 1]] }}</div>
                    </div>
                </div>
                <div @click="offset(cd2[index - 1])" :style="{ border: index < 12 ? '#fff solid 1px' : 'transparent solid 1px', color: '#6FCFF2' }">
                    <div>
                        <div v-if="show">
                            <div>{{ !cd2[index - 1] ? '' : offsetList && offsetList[cd2[index - 1]] ? offsetList[cd2[index - 1]][0] : 0 }}</div>
                            <div>{{ !cd2[index - 1] ? '' : offsetList && offsetList[cd2[index - 1]] ? offsetList[cd2[index - 1]][1] : 0 }}</div>
                        </div>
                        <div v-else>{{ data[cd2[index - 1]] }}</div>
                    </div>
                </div>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @set="setOffset"></zy-form>
        <zy-form ref="zyform1" :dialog="dialog1" @set="setWarn"></zy-form>
        <List ref="list" />
        <el-dialog :visible.sync="isShow" width="680px" top="12vh" size="mini" :close-on-click-modal="false">
            <el-form>
                <table style="color: #007bff; font-size: 18px; margin-bottom: 20px">
                    <tr>
                        <th></th>
                        <th>一般</th>
                        <th>中等</th>
                        <th>严重</th>
                    </tr>
                    <tr>
                        <td>钢棒</td>
                        <td style="padding: 10px" v-for="(t, i) in tempwarn.gb" :key="i"><el-input-number v-model="tempwarn.gb[i]"></el-input-number></td>
                    </tr>
                    <tr>
                        <td>钢窗</td>
                        <td style="padding: 10px" v-for="(t, i) in tempwarn.gc" :key="i"><el-input-number v-model="tempwarn.gc[i]"></el-input-number></td>
                    </tr>
                    <tr>
                        <td>炉底</td>
                        <td style="padding: 10px" v-for="(t, i) in tempwarn.ld" :key="i"><el-input-number v-model="tempwarn.ld[i]"></el-input-number></td>
                    </tr>
                </table>
                <el-form-item>
                    <el-button type="primary" @click="setWarn(null)">确定</el-button>
                    <el-button @click="() => (this.isShow = false)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="月度每日平均温度趋势" width="900px" :visible.sync="isShow1" top="12vh" size="mini" :close-on-click-modal="false">
            <div style="height: 400px">
                <div style="height: 40px; display: flex; align-items: center">
                    <el-select filterable v-model="sensor_id" style="width: 200px; margin: 0 40px" placeholder="请选择测点" @change="report">
                        <el-option v-for="i in sensorList" :key="i.value" :label="i.label" :value="i.value"></el-option>
                    </el-select>
                    <el-date-picker v-model="month" type="month" style="width: 200px" placeholder="请选择月份" value-format="yyyyMM" @change="report"></el-date-picker>
                </div>
                <div style="height: 360px; width: 860px" ref="content"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import * as echarts from 'echarts'
import { config, config1 } from './formConfig.js'
import zyForm from '@/components/common/zyForm.vue'
import Danmuku from '@/plugins/danmuku'
import List from '@/views/AIOps/Warn/List.vue'
import { warn_level } from '@/plugins/mate.js'

export default {
    components: {
        zyForm,
        List,
    },
    data() {
        return {
            manager: null,
            data: {},
            options: [],
            device_id: null,
            timer: null,
            date: null,
            offsetList: null,
            tempwarn: { gb: [99999, 99999, 99999], gc: [99999, 99999, 99999], ld: [99999, 99999, 99999] },
            month: null,
            sensor_id: null,
            sensorList: [],
            cd1: [257, 258, 259, 260, 261, 262, 265, 266, 267, 268, 269],
            cd2: [249, 250, 251, 252, 253, 254, 255, 245, 246, 247, 248],
            dialog: {
                labelWidth: '130px',
                config: [],
                form: {},
                title: '',
            },
            dialog1: {
                labelWidth: '120px',
                config: [],
                form: {},
                title: '',
            },
            show: false,
            isShow: false,
            isShow1: true,
        }
    },
    methods: {
        setTimer() {
            this.get()
            requestApi('post', 'eigenvalue/eig/savetempoffset', { did: this.device_id, offset: '', sindex: 0 }).then((res) => {
                for (const key in res.data.data) {
                    res.data.data[key] = res.data.data[key].split(',')
                }
                this.offsetList = res.data.data
            })
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.timer = setInterval(() => {
                this.get()
            }, 30 * 1000)
        },
        get() {
            requestApi('post', 'eigenvalue/eig/temps', { r_key: 'temp:5300_' + this.device_id }).then((res) => {
                const moment = require('moment')
                this.date = moment().format('YYYY-MM-DD HH:mm:ss')
                this.data = res.data.data
            })
        },
        zimu() {
            if (this.manager.runing) {
                this.manager.hidden()
                this.manager.stop()
            } else {
                this.manager.show()
                this.manager.start()
            }
        },
        setcolor(temp, type) {
            return temp > this.tempwarn[type][2] ? warn_level.color[3] : temp > this.tempwarn[type][1] ? warn_level.color[2] : temp > this.tempwarn[type][0] ? warn_level.color[1] : warn_level.color[0]
        },
        offset(sindex) {
            if (!this.show) return
            if (sindex) {
                this.dialog.title = '设置偏移量'
                this.dialog.config = config
                this.dialog.form = {
                    did: this.device_id,
                    sindex,
                    offsetA: this.offsetList[sindex] ? this.offsetList[sindex][0] : 0,
                    offsetB: this.offsetList[sindex] ? this.offsetList[sindex][1] : 0,
                }
                this.$refs.zyform.openDialog('change')
            }
        },
        warn(type) {
            this.dialog1.title = '设置告警阈值'
            this.dialog1.config = config1
            this.dialog1.form = {
                type,
                data1: this.tempwarn[type][0],
                data2: this.tempwarn[type][1],
                data3: this.tempwarn[type][2],
            }
            this.$refs.zyform1.openDialog('change')
        },
        setOffset(data) {
            requestApi('post', 'eigenvalue/eig/savetempoffset', {
                did: data.did,
                sindex: data.sindex,
                offset: [data.offsetA, data.offsetB].join(','),
            }).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    })
                    this.$refs.zyform.closeDialog()
                    requestApi('post', 'eigenvalue/eig/savetempoffset', { did: this.device_id, offset: '', sindex: 0 }).then((res) => {
                        for (const key in res.data.data) {
                            res.data.data[key] = res.data.data[key].split(',')
                        }
                        this.offsetList = res.data.data
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: res.data.msg,
                    })
                }
            })
        },
        setWarn(data) {
            if (data) {
                this.tempwarn[data.type] = [data.data1, data.data2, data.data3]
            }
            requestApi('post', 'eigenvalue/eig/savetempwarn', { data: JSON.stringify(this.tempwarn), did: this.device_id }).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '修改成功',
                    })
                    this.$refs.zyform1.closeDialog()
                    this.isShow = false
                    requestApi('post', 'eigenvalue/eig/savetempwarn', { data: '' }).then((res) => {
                        if (res.data.data) {
                            this.tempwarn = JSON.parse(res.data.data)
                        }
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: res.data.msg,
                    })
                }
            })
        },
        send(data) {
            let send = this.send
            let list = this.$refs.list
            this.manager.send(data, {
                create(barrage, node) {
                    node.textContent = barrage.data.text
                    node.classList.add('barrage-style')
                    node.classList.add('barrage-style1')
                    node.style.color = barrage.data.color
                    node.onmouseenter = (e) => {
                        node.textContent = barrage.data.text + ' ' + barrage.data.pred_time
                        node.classList.remove('barrage-style1')
                        barrage.pause()
                    }
                    node.onmouseleave = (e) => {
                        node.textContent = barrage.data.text
                        node.classList.add('barrage-style1')
                        barrage.resume()
                    }
                    node.onclick = (e) => {
                        // node.onclick = (e) => barrage.destroy()
                        list.doOpen(data, false)
                    }
                },
                remove(barrage, node) {
                    send(data)
                },
            })
        },
        exportt() {
            let str = `A侧,序号,`
            for (let i = 1; i <= 27; i++) {
                str += i + ','
            }
            str += `\r\nA侧,钢窗,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[5 * (i - 1) + 1] + ','
            }
            str += `\r\nA侧,钢棒,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[5 * (i - 1) + 2] + '|' + this.data[5 * (i - 1) + 3] + ','
            }
            str += `\r\nB侧,序号,`
            for (let i = 1; i <= 27; i++) {
                str += i + ','
            }
            str += `\r\nB侧,钢窗,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[136 + (i - 1) * 4 + 1] + ','
            }
            str += `\r\nB侧,钢棒,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[136 + (i - 1) * 4 + 3] + '|' + this.data[136 + (i - 1) * 4 + 2] + ','
            }
            str += `\r\n炉底,序号,`
            for (let i = 1; i <= 27; i++) {
                str += i + ','
            }
            str += `\r\n炉底,A侧,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[5 * (i - 1) + 4] + ','
            }
            str += `\r\n炉底,中间,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[5 * (i - 1) + 5] + ','
            }
            str += `\r\n炉底,B侧,`
            for (let i = 1; i <= 27; i++) {
                str += this.data[136 + (i - 1) * 4 + 4] + ','
            }
            str += `\r\n槽洞,序号,`
            for (let i = 1; i <= 11; i++) {
                str += i + ','
            }
            str += `\r\n槽洞,前(A-b),`
            for (let i = 1; i <= 11; i++) {
                str += this.data[this.cd1[i - 1]] + ','
            }
            str += `\r\n槽洞,后(A-b),`
            for (let i = 1; i <= 11; i++) {
                str += this.data[this.cd2[i - 1]] + ','
            }
            const uri = `data:text/xlsx;charset=utf-8,\ufeff${encodeURIComponent(str.replace(/undefined/g, ''))}`
            const link = document.createElement('a')
            link.href = uri
            link.download = this.options.find((item) => item.id === this.device_id).device_name + '电解槽 ' + this.date + '.xlsx'
            link.click()
        },
        report() {
            if (this.sensor_id && this.month) {
                requestApi('post', 'eigenvalue/eig/getstat', { did: this.device_id, month: this.month, sindex: this.sensor_id }).then((res) => {
                    if (res.data.code == 0) {
                        this.isShow1 = true
                        let list1 = []
                        let list2 = []
                        res.data.data.map((item) => {
                            list1.push(item.d)
                            list2.push(item.v)
                        })
                        let myChart = echarts.init(this.$refs.content)
                        let option = {
                            color: ['#00f2f1'],
                            legend: {
                                show: false,
                            },
                            xAxis: {
                                axisLabel: {
                                    textStyle: {
                                        color: '#1FF8FD',
                                    },
                                },
                                type: 'category',
                                boundaryGap: false,
                                data: list1,
                                name: '日期',
                                nameTextStyle: {
                                    fontWeight: 600,
                                    fontSize: 18,
                                    color: '#5ff2fa',
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#5187AA',
                                    },
                                },
                                axisLine: {
                                    show: false,
                                },
                            },
                            yAxis: {
                                type: 'value',
                                name: '温度',
                                minInterval: 1,
                                nameTextStyle: {
                                    fontWeight: 600,
                                    fontSize: 18,
                                    color: '#5ff2fa',
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#5187AA',
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: '#284469',
                                    },
                                },
                            },
                            tooltip: {
                                trigger: 'axis',
                            },
                            series: [{ name: '每日平均温度', data: list2, type: 'line' }],
                            grid: {
                                top: '16%',
                                left: '3%',
                                right: '8%',
                                bottom: '4%',
                                show: true,
                                borderColor: '#012f4a',
                                containLabel: true,
                            },
                        }
                        myChart.setOption(option)
                        window.addEventListener('resize', function () {
                            myChart.resize()
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '暂无数据',
                        })
                    }
                })
            }
        },
    },
    created() {
        requestApi('post', 'device/getlist', { page: 1, size: 999 }).then((res) => {
            this.options = res.data.data
            this.device_id = this.options[0].id
            this.setTimer()
        })
        requestApi('post', 'eigenvalue/eig/savetempwarn', { data: '' }).then((res) => {
            if (res.data.data) {
                this.tempwarn = JSON.parse(res.data.data)
            }
        })
        let l = [
            'A1钢窗',
            'A1钢棒左',
            'A1钢棒右',
            'A1炉底',
            'A1炉中',
            'A2钢窗',
            'A2钢棒左',
            'A2钢棒右',
            'A2炉底',
            'A2炉中',
            'A3钢窗',
            'A3钢棒左',
            'A3钢棒右',
            'A3炉底',
            'A3炉中',
            'A4钢窗',
            'A4钢棒左',
            'A4钢棒右',
            'A4炉底',
            'A4炉中',
            'A5钢窗',
            'A5钢棒左',
            'A5钢棒右',
            'A5炉底',
            'A5炉底',
            'A6钢窗',
            'A6钢棒左',
            'A6钢棒右',
            'A6炉底',
            'A6炉中',
            'A7钢窗',
            'A7钢棒左',
            'A7钢棒右',
            'A7炉底',
            'A7炉中',
            'A8钢窗',
            'A8钢棒左',
            'A8钢棒右',
            'A8炉底',
            'A8炉中',
            'A9钢窗',
            'A9钢棒左',
            'A9钢棒右',
            'A9炉底',
            'A9炉中',
            'A10钢窗',
            'A10钢棒左',
            'A10钢棒右',
            'A10炉底',
            'A10炉中',
            'A11钢窗',
            'A11钢棒左',
            'A11钢棒右',
            'A11炉底',
            'A11炉中',
            'A12钢窗',
            'A12钢棒左',
            'A12钢棒右',
            'A12炉底',
            'A12炉中',
            'A13钢窗',
            'A13钢棒左',
            'A13钢棒右',
            'A13炉底',
            'A13炉中',
            'A14钢窗',
            'A14钢棒左',
            'A14钢棒右',
            'A14炉底',
            'A14炉中',
            'A15钢窗',
            'A15钢棒左',
            'A15钢棒右',
            'A15炉底',
            'A15炉中',
            'A16钢窗',
            'A16钢棒左',
            'A16钢棒右',
            'A16炉底',
            'A16炉中',
            'A17钢窗',
            'A17钢棒左',
            'A17钢棒右',
            'A17炉底',
            'A17炉中',
            'A18钢窗',
            'A18钢棒左',
            'A18钢棒右',
            'A18炉底',
            'A18炉中',
            'A19钢窗',
            'A19钢棒左',
            'A19钢棒右',
            'A19炉底',
            'A19炉中',
            'A20钢窗',
            'A20钢棒左',
            'A20钢棒右',
            'A20炉底',
            'A20炉中',
            'A21钢窗',
            'A21钢棒左',
            'A21钢棒右',
            'A21炉底',
            'A21炉中',
            'A22钢窗',
            'A22钢棒左',
            'A22钢棒右',
            'A22炉底',
            'A22炉中',
            'A23钢窗',
            'A23钢棒左',
            'A23钢棒右',
            'A23炉底',
            'A23炉中',
            'A24钢窗',
            'A24钢棒左',
            'A24钢棒右',
            'A24炉底',
            'A24炉中',
            'A25钢窗',
            'A25钢棒左',
            'A25钢棒右',
            'A25炉底',
            'A25炉中',
            'A26钢窗',
            'A26钢棒左',
            'A26钢棒右',
            'A26炉底',
            'A26炉中',
            'A27钢窗',
            'A27钢棒左',
            'A27钢棒右',
            'A27炉底',
            'A27炉中',
            'None',
            'B1钢窗',
            'B1钢棒右',
            'B1钢棒左',
            'B1炉底',
            'B2钢窗',
            'B2钢棒右',
            'B2钢棒左',
            'B2炉底',
            'B3钢窗',
            'B3钢棒右',
            'B3钢棒左',
            'B3炉底',
            'B4钢窗',
            'B4钢棒右',
            'B4钢棒左',
            'B4炉底',
            'B5钢窗',
            'B5钢棒右',
            'B5钢棒左',
            'B5炉底',
            'B6钢窗',
            'B6钢棒右',
            'B6钢棒左',
            'B6炉底',
            'B7钢窗',
            'B7钢棒右',
            'B7钢棒左',
            'B7炉底',
            'B8钢窗',
            'B8钢棒右',
            'B8钢棒左',
            'B8炉底',
            'B9钢窗',
            'B9钢棒右',
            'B9钢棒左',
            'B9炉底',
            'B10钢窗',
            'B10钢棒右',
            'B10钢棒左',
            'B10炉底',
            'B11钢窗',
            'B11钢棒右',
            'B11钢棒左',
            'B11炉底',
            'B12钢窗',
            'B12钢棒右',
            'B12钢棒左',
            'B12炉底',
            'B13钢窗',
            'B13钢棒右',
            'B13钢棒左',
            'B13炉底',
            'B14钢窗',
            'B14钢棒右',
            'B14钢棒左',
            'B14炉底',
            'B15钢窗',
            'B15钢棒右',
            'B15钢棒左',
            'B15炉底',
            'B16钢窗',
            'B16钢棒右',
            'B16钢棒左',
            'B16炉底',
            'B17钢窗',
            'B17钢棒右',
            'B17钢棒左',
            'B17炉底',
            'B18钢窗',
            'B18钢棒右',
            'B18钢棒左',
            'B18炉底',
            'B19钢窗',
            'B19钢棒右',
            'B19钢棒左',
            'B19炉底',
            'B20钢窗',
            'B20钢棒右',
            'B20钢棒左',
            'B20炉底',
            'B21钢窗',
            'B21钢棒右',
            'B21钢棒左',
            'B21炉底',
            'B22钢窗',
            'B22钢棒右',
            'B22钢棒左',
            'B22炉底',
            'B23钢窗',
            'B23钢棒右',
            'B23钢棒左',
            'B23炉底',
            'B24钢窗',
            'B24钢棒右',
            'B24钢棒左',
            'B24炉底',
            'B25钢窗',
            'B25钢棒右',
            'B25钢棒左',
            'B25炉底',
            'B6钢窗',
            'B26钢棒右',
            '26钢棒左',
            'B26炉底',
            'B27钢窗',
            'B27钢棒右',
            'B27钢棒左',
            'B27炉底',
            '槽洞后1',
            '槽洞后2',
            '槽洞后3',
            '槽洞后4',
            '槽洞后5',
            '槽洞后6',
            '槽洞后7',
            '槽洞后8',
            '槽洞后9',
            'None',
            'None',
            'None',
            '槽洞前1',
            '槽洞前2',
            '槽洞前3',
            '槽洞前4',
            'None',
            'None',
            'None',
            'None',
            '槽洞前5',
            '槽洞前6',
            '槽洞前7',
            '槽洞前8',
            '槽洞前9',
            'None',
            'None',
            'None',
        ]
        l.forEach((item, index) => {
            if (item !== 'None')
                this.sensorList.push({
                    value: index + 1,
                    label: item,
                })
        })
    },
    mounted() {
        this.isShow1 = false
        setTimeout(() => {
            this.manager = Danmuku.create({
                container: document.getElementById('content'),
                times: [59, 60],
                direction: 'left',
            })
            requestApi('post', 'warn/warnlist', { page: 1, size: 999999 }).then((res) => {
                res.data.data.map((data) => {
                    data.text = data.content.replace(',温度:', ':') + '℃'
                    data.color = warn_level.color[data.warn_level]
                    this.send(data)
                })
            })
        }, 200)
    },
    destroyed() {
        this.manager.clear()
        this.manager = null
        clearInterval(this.timer)
        this.timer = null
    },
}
</script>

<style lang="less">
.columnn {
    display: flex;
    flex-direction: column;
    align-items: center;
    > div {
        flex: 1;
        border: #fff solid 1px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.barrage-style {
    font-size: 22px;
}

.barrage-style1 {
    opacity: 0.7 !important;
}
</style>
